<template>
  <div class="lend-wrap">
    <div v-if="step === 0">
      <div class="nav_wrap">
        <span>$235.432.432.24</span>
        <label>Total Value Locked</label>
      </div>
      <div class="pools">
        <nav>
          <Row :gutter="['24', '12']" style="display: flex">
            <Col :span="6">
              <div class="p_title1">Available leading pools</div>
            </Col>
            <Col :span="3">
              <div class="p_title">APY</div>
            </Col>
            <Col :span="3">
              <div class="p_title">Total Supply</div>
            </Col>
            <Col :span="3">
              <div class="p_title">Total Borrowed</div>
            </Col>
            <Col :span="2">
              <div class="p_title">Utilization</div>
            </Col>
            <Col :span="3">
              <div class="p_title">Your Balance</div>
            </Col>
            <Col :span="4">
              <div class="p_title"></div>
            </Col>
          </Row>
        </nav>
        <content v-for="(item, i) in lendPools" :key="i">
          <Row :gutter="['24', '12']" style="display: flex">
            <Col class="row" :span="6">
              <div class="pool_col">
                <div class="p_left">
                  <img class="img1" src="@/assets/icons/coin-3.png" />
                  <img class="img2" src="@/assets/icons/coin-4.png" />
                </div>
                <div class="p_right">
                  <div class="p_text">
                    <div>{{ item.name }}</div>
                    <span>New</span>
                  </div>
                  <div v-if="wallet.connected" class="p_tip">{{ item.tip }}</div>
                  <div v-if="wallet.connected" class="p_prior">{{ item.prior }}</div>
                </div>
              </div>
            </Col>
            <Col class="row" :span="3">
              <div v-if="wallet.connected" class="yield_col">
                <div v-for="(pool, i) in item.pools" :key="i" class="pool_item">
                  <label :class="pool.className">{{ pool.name }}</label>
                  <span :class="pool.className" class="right">{{ pool.value }}</span>
                </div>
              </div>
            </Col>
            <Col class="row" :span="3">
              <div v-if="wallet.connected" class="t_line">{{ item.supply }}</div>
            </Col>
            <Col class="row" :span="3">
              <div v-if="wallet.connected" class="t_line">{{ item.borrow }}</div>
            </Col>
            <Col class="row" :span="2">
              <div v-if="wallet.connected" class="t_line">{{ item.percent }}</div>
            </Col>
            <Col class="row" :span="3">
              <div v-if="wallet.connected" class="apy_col">
                <span class="span">{{ item.coin_from }}</span>
                <label class="label">{{ item.coin_to }}</label>
              </div>
            </Col>
            <Col class="row" :span="4">
              <div v-if="!wallet.connected" class="btn_wrap">
                <Button type="dashed" @click="$accessor.wallet.openModal">Deposit</Button>
                <Button type="dashed" style="margin-top: 12px" @click="$accessor.wallet.openModal">Withdraw</Button>
              </div>
              <div v-else class="btn_wrap">
                <Button type="primary" @click="onDeposit(0)">Deposit</Button>
                <Button ghost style="margin-top: 12px" @click="onDeposit(1)">Withdraw</Button>
              </div>
            </Col>
          </Row>
        </content>
      </div>
    </div>

    <div v-else-if="step === 1" class="lend-apprpve">
      <div class="title-wrap">
        <img class="icon" src="@/assets/icons/coin-3.png" />
        <div class="title">{{ usdtType ? 'Withhdraw ibSPL' : 'Depositing SPL' }}</div>
      </div>
      <div class="sub-title">Available Balance :0.00 SPL</div>
      <div class="search-wrap">
        <div class="input-wrap">
          <input placeholder="Deposit Amount" :value="searchValue" maxlength="20" @input="onSearch" />
        </div>
        <div v-if="usdtType === 1" class="input-text">You will receive: <span class="coin"> ~0.00 SPL </span></div>
      </div>
      <div class="ops">
        <div @click="onBack"><img src="@/assets/icons/back.png" /><span class="back">Back</span></div>
        <Button type="primary" :disabled="!searchValue" @click="commitApprpve">Apprpve</Button>
      </div>
    </div>
    <Modal :footer="null" :visible="openModal" :width="480" :title="''" @cancel="onCancel">
      <div class="ntoken-select">
        <div class="tip">Your Choice</div>
        <div
          v-for="(item, i) in nfts"
          :key="i"
          :class="selectKey === i ? 'nft-item-active nft-item' : 'nft-item nft-item-default'"
          @click="onSelect(i)"
        >
          <div>
            <div class="line-wrap">
              <img class="img" src="@/assets/icons/radio.png" />
              <span class="text">{{ item }}</span>
            </div>
            <div class="coin-wrap" v-if="selectKey === i">
              <div :class="selectKey1 === 1 ? 'coins coins-active' : 'coins'" @click="selectCoin(1)">
                <img class="img1" src="@/assets/icons/coin-3.png" />USDT(SPL)
              </div>
              <div :class="selectKey1 === 2 ? 'coins coins-active' : 'coins'" @click="selectCoin(2)">
                <img class="img1" src="@/assets/icons/coin-4.png" />AAA
              </div>
            </div>
          </div>
        </div>
        <div class="next-btn" @click="onApprpve">YES</div>
      </div>
    </Modal>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'
import { mapState } from 'vuex'
import { Modal, Row, Col, Button } from 'ant-design-vue'
import { supply } from '@/utils/create-demo'
import { getUnixTs } from '@/utils'

Vue.use(Modal)

export default Vue.extend({
  components: {
    Modal,
    Row,
    Col,
    Button
  },
  data() {
    return {
      selectKey: 0,
      openModal: false,
      step: 0,
      nfts: ['Prior(Redeemable, low yield)', 'Posterior(Cannot be redeemed in advance, high yield)'],
      usdtType: 0,
      searchValue: '',
      selectKey1: 1,
      lendPools: [
        {
          pairs_from: 'coin-3',
          pairs_to: 'coin-4',
          name: 'USDT(SPL)-AAA',
          tip: '1 ibUSDT(SPL)+1.0001 USDT(SPL)',
          prior: 'Prior : Posterior = 3:7',
          pools: [
            {
              name: 'Lending APR',
              value: '0.58%'
            },
            { name: 'Staking APR', value: '29.54%' },
            { name: 'Total APR', value: '23.24%' },
            { name: 'Total APY', value: '62.36%', className: 'green' }
          ],
          supply: '25.62M USDT(SPL)',
          borrow: '5.2M USDT(SPL)',
          percent: '25.62%',
          coin_from: '0 ibUSDT(SPL)',
          coin_to: '0 USDT(SPL)'
        }
      ]
    }
  },
  computed: {
    ...mapState(['wallet'])
  },
  methods: {
    selectCoin(i: number) {
      this.selectKey1 = i
    },
    onSelect(i: number) {
      this.selectKey = i
    },
    onDeposit(type: number) {
      if (type === 1) {
        this.step = 1
        this.usdtType = type
      } else {
        this.openModal = true
      }
    },
    onCancel() {
      this.openModal = false
    },
    onApprpve() {
      this.openModal = false
      setTimeout(() => {
        this.step = 1
        this.usdtType = 0
      }, 600)
    },
    onBack() {
      this.step = 0
    },
    onSearch(e: any) {
      this.searchValue = e.target.value
    },
    commitApprpve() {
      const key = getUnixTs().toString()
      supply(this.$web3, this.$wallet)
        .then((txid) => {
          this.$notify.info({ key, message: 'Transaction has been sent', description: '' })
          const description = ''
          this.$accessor.transaction.sub({ txid, description })
        })
        .catch((error) => {
          this.$notify.info({ key, message: error, description: '' })
        })
    }
  }
})
</script>

<style lang="less" scoped>
@import '../styles/variables';
.lend-wrap {
  width: 1200px;
  margin: 100px auto 35px auto;
  .nav_wrap {
    height: 240px;
    border-radius: 24px;
    color: @p-color;
    margin-bottom: 60px;
    background: #e0b391 url('@/assets/icons/lend-bg.png') no-repeat center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    span {
      font-size: 36px;
      font-family: @fre-font;
    }
    label {
      font-size: 24px;
      color: @p-color;
      font-weight: bold;
    }
  }
  .pools {
    width: 1200px;
    display: flex;
    flex-direction: column;
    height: 277px;
    nav {
      border-bottom: 1px solid #ddd;
    }
    .p_title1 {
      font-size: 24px;
      font-family: @fre-font;
    }
    .p_title {
      font-size: 14px;
      padding-bottom: 30px;
      line-height: 40px;
      color: #7a736c;
    }
    content {
      background: #fff;
      border-radius: 24px;
      padding: 30px 0;
      margin-bottom: 18px;
      .pool_col {
        font-size: 24px;
        color: @p-color;
        display: flex;
        align-items: center;
        justify-content: right;
        width: 100%;
        padding-left: 30px;
        .p_left {
          margin-right: 4px;
          width: 78px;
          position: relative;
          height: 48px;
          .img1 {
            width: 48px;
            position: absolute;
            left: 0;
            z-index: 1;
            top: 0;
          }
          .img2 {
            width: 48px;
            position: absolute;
            right: 0;
            z-index: 2;
            top: 0;
          }
        }
        .p_right {
          display: flex;
          flex-direction: column;
          margin-left: 18px;
          .p_text {
            display: flex;
            align-items: center;
            div {
              font-size: 14px;
              font-family: @fre-font;
              color: @p-color;
              margin-right: 8px;
            }
            span {
              width: 36px;
              height: 18px;
              border-radius: 6px;
              color: #fff;
              background: #ffa348;
              line-height: 18px;
              text-align: center;
              font-size: 12px;
            }
          }
          .p_tip {
            color: #7a736c;
            font-size: 12px;
            margin-top: 4px;
            font-weight: bold;
          }
          .p_prior {
            color: @s-color;
            font-size: 12px;
            margin-top: 4px;
            font-weight: bold;
          }
        }
      }
      .apy_col {
        display: flex;
        flex-direction: column;
        .span {
          font-size: 12px;
          color: #7a736c;
          font-weight: bold;
        }
        .label {
          font-size: 12px;
          color: #7a736c;
          font-weight: bold;
        }
      }
      .yield_col {
        width: 100%;
      }
      .t_line {
        font-size: 14px;
        color: @p-color;
        font-family: @fre-font;
      }
      .btn_wrap {
        display: flex;
        flex-direction: column;
        padding-right: 30px;
      }
    }
  }

  .pool_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    > label {
      font-size: 12px;
      color: #7a736c;
    }
    .right {
      font-family: @fre-font;
      color: @p-color;
      font-size: 12px;
    }
  }
  .row {
    display: flex;
    align-items: center;
  }

  .lend-apprpve {
    padding: 30px;
    background: #fff;
    box-sizing: border-box;
    border-radius: 24px;
    .title-wrap {
      display: flex;
      align-items: center;
      .icon {
        width: 36px;
        height: 36px;
        margin-right: 12px;
      }
      .title {
        color: @p-color;
        font-size: 24px;
        font-family: @fre-font;
      }
    }
    .sub-title {
      margin: 25px 0 11px 0;
      color: #7a736c;
      font-size: 18px;
      font-weight: bold;
    }
    .search-wrap {
      border-radius: 12px;
      background: fade(#ffe4c5, 40);
      margin-bottom: 30px;
      .input-wrap {
        border: 1px solid #aaa49f;
        border-radius: 12px;
        background: #fff;
        height: 60px;
        width: 100%;
        input {
          color: @p-color;
          font-size: 24px;
          border: none;
          outline: none;
          text-indent: 24px;
          width: 100%;
          height: 58px;
          border-radius: 12px;
          font-family: @fre-font;
          &::placeholder {
            color: #ddd;
          }
        }
      }
      .input-text {
        color: #7a736c;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        height: 93px;
        display: flex;
        align-items: center;
        justify-content: center;
        .coin {
          color: #f15726;
          font-size: 24px;
          font-weight: bold;
        }
      }
    }
    .ops {
      display: flex;
      justify-content: space-between;
      .back {
        color: #aaa49f;
        font-weight: bold;
        cursor: pointer;
      }
    }
  }
}
.ntoken-select {
  .tip {
    text-align: center;
    font-size: 24px;
    font-family: @fre-font;
    margin: 20px 0;
  }
  .next-btn {
    height: 60px;
    width: 360px;
    background: @s-color;
    border-radius: 18px;
    line-height: 60px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    margin: 20px auto;
  }
  .nft-item {
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    padding: 0 24px;
    box-sizing: border-box;
    cursor: pointer;
    min-height: 60px;
    align-items: center;
    .line-wrap {
      display: flex;
    }
    .img {
      width: 18px;
      height: 18px;
      margin-right: 18px;
      margin-top: 3px;
    }
    .text {
      font-size: 18px;
      color: @p-color;
      font-weight: bold;
    }
  }
  .nft-item-default {
    background: fade(#fff, 60);
    .img {
      visibility: hidden;
    }
  }
  .nft-item-active {
    background: #fff;
    .img {
      visibility: inherit;
    }
  }
}
.coin-wrap {
  margin: 18px 0 18px 36px;
  display: flex;
  .coins-active {
    border: 1px solid #f15726 !important;
  }
  .coins {
    border: 1px solid #fff;
    font-size: 14px;
    font-family: @fre-font;
    border-radius: 18px;
    padding: 18px 24px;
    margin-right: 12px;
    min-width: 150px;
    display: flex;
    align-items: center;
    img {
      margin-right: 10px;
      width: 24px;
      height: 24px;
    }
  }
}
</style>
